import {
  Card,
  CardBody,
  CardFooter,
  Image,
  Button,
  CardHeader,
  addToast,
} from "@heroui/react";
import LoginForm from "../../components/login/LoginForm";
import { motion } from "framer-motion";
import LoginHeader from "../../components/login/LoginHeader";
import SpanMotion from "../../components/login/SpanMotion";
import StrongMotion from "../../components/login/StrongMotion";
import { useRef } from "react";
import { toast, ToastContainer } from "react-toastify";
export default function LoginMain({ ...Props }) {
  const TITLE_PREFIX = "Rumpredict ";
  const TITLE_SUFFIX = " 用户登录";
  const child_ref = useRef();
  const SUB_TITLE = "Rumpredict";
  const user_event = ["注册", "登录"];
  const notify = ({ component = null, content, option = null }) => {
    console.log(content, option);

    if (option == null) {
      if (component == null) {
        toast(content);
      } else {
        toast(component);
      }
    } else {
      if (component == null) {
        toast(content, option);
      } else {
        toast(component, option);
      }
    }
  };
  const handle_submit = () => {
    if (child_ref.current && !child_ref.current.dispatch_submit()) {
    }
  };
  return (
    <motion.div
      className="w-[30%] h-[70%] flex justify-center items-center"
      initial={{
        opacity: 0,
        y: -100,
        backdropFilter: "blur(0px)",
      }}
      animate={{
        opacity: [0, 0.8, 1],
        y: 0,
        backdropFilter: "blur(8px)",
      }}
      transition={{
        times: [0, 0.6, 1],
        duration: 1,
        ease: ["easeInOut", "easeInOut"],
      }}
    >
      <Card
        shadow="lg"
        isBlurred
        isFooterBlurred
        classNames={{
          base: "bg-transparent w-[100%] h-[100%]",
          body: "w-[100%] h-[80%] flex-col justify-center items-center absolute",
          footer:
            "absolute mx-2 flex justify-around py-2 px-1 rounded-large  bottom-1 w-[calc(70%_-_8px)] shadow-medium z-10",
        }}
      >
        <CardHeader className="flex justify-center gap-3">
          <LoginHeader sub_title={SUB_TITLE}>
            <motion.div
              drag
              dragSnapToOrigin
              initial={{
                scale: 1,
              }}
              transition={{ duration: 0.3 }}
              whileHover={{ scale: 1.1 }}
            >
              <Image
                draggable={false}
                isBlurred
                shadow="none"
                alt="Rumpredict logo"
                radius="sm"
                src="https://cdn.jsdelivr.net/gh/Nazelto/rumpredict/icon_black_radius.png"
              />
            </motion.div>
            {/*  */}
            <SpanMotion
              content={TITLE_PREFIX}
              className="uppercase"
            ></SpanMotion>
            {/*  */}
            <StrongMotion
              prefix={TITLE_PREFIX}
              content={TITLE_SUFFIX}
            ></StrongMotion>
            {/*  */}
            <SpanMotion
              prefix={TITLE_PREFIX.concat(TITLE_SUFFIX)}
              content={SUB_TITLE}
              className="uppercase text-xs"
            ></SpanMotion>
          </LoginHeader>
        </CardHeader>
        <CardBody>
          <LoginForm notify={notify} ref={child_ref}></LoginForm>
        </CardBody>
        <motion.div
          initial={{
            opacity: 0,
          }}
          animate={{
            opacity: 1,
          }}
          transition={{
            delay: 1,
            duration: 0.5,
            ease: "easeInOut",
          }}
        >
          <CardFooter className="transform translate-x-[23%] -translate-y-[10px]">
            {user_event.map((title) => (
              <motion.div
                initial={{ scale: 1 }}
                transition={{
                  duration: 0.5,
                }}
                whileHover={{ scale: 1.15 }}
                key={`${title}`}
              >
                <Button
                  className="text-tiny text-white bg-black/20 shadow-md"
                  color="default"
                  radius="lg"
                  size="md"
                  type={title === "登录" ? "submit" : ""}
                  variant="flat"
                  onPress={handle_submit}
                >
                  {title}
                </Button>
                {/* {event == "注册" &&
                  Array.from({ length: 2 }).map((index) => (
                    <>
                      <Spacer x={1}></Spacer>
                    </>
                  ))} */}
              </motion.div>
            ))}
          </CardFooter>
        </motion.div>
      </Card>
      <ToastContainer
        position="top-center"
        className="absolute -top-[15%]"
      ></ToastContainer>
    </motion.div>
  );
}
